<template>
  <div v-if="showCart" class="fixed w-full h-full bg-mask-6 left-0 top-0">
    <div
      class="absolute w-356px w-308px left-526px top-224px bg-white rounded-4px flex flex-col items-center"
    >
      <div class="w-132px h-148px pt-22px"><img :src="rubbish" class="w-full h-full" alt="" /></div>
      <div class="font-medium text-18px leading-26px text-black pt-10px pb-28px">
        确认是否清空购物车？
      </div>
      <div class="flex font-medium pb-32px">
        <div
          class="bg-warn w-104px h-42px rounded-68px text-center leading-42px text-white mr-50px cursor-pointer"
          @click="emit('on-confirm')"
        >
          确定
        </div>
        <div
          class="border-secondary w-104px h-42px rounded-68px text-center leading-42px color-secondary cursor-pointer"
          @click="emit('on-cancel')"
        >
          取消
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import rubbish from '@renderer/assets/rubbish.svg'
import { computed } from 'vue'
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:show', 'on-confirm', 'on-cancel'])

const showCart = computed({
  get: () => props.show,
  set: (v) => {
    emit('update:show', v)
    return v
  }
})
</script>

<style scoped></style>
